/* 
  2021.07.24 参考el-button的样式 封装原生button按钮样式
  2021.07.26 增加了禁用disabled 需要在hover上再判断不是禁用的状态
  2020.07.27 增加了less，封装全局样式后简化css代码量
 */
// 此处不能用.dw-button 会导致外部无法使用类名修改

button {
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  padding: 5px 15px 6px 15px;
  border: 1px solid #fff;
  // line-height: 1.499;
  cursor: pointer;
  width: fit-content;
}

@media screen and (max-width: 768px) {
  button {
    font-size: 12px;
    padding: 3px 10px 4px 10px;
  }
}

/* 默认按钮 */
.dw-button.default {
  color: #606266;
  border-color: #dcdfe6;
  background-color: #fff;
  &:not(.dw-disabled) {
    &:hover {
      color: #409eff;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
    }
    &:active {
      color: #3a8ee6;
      border-color: #3a8ee6;
    }
  }
}

/* 文字按钮 */
.dw-button.text {
  color: #409eff;
  border-color: transparent;
  background: transparent;
  &:hover {
    color: #66b1ff;
  }
}

/* 其余按钮的通用模板 */
.bg-and-border-color(@color,@hoverColor,@activeColor) {
  background: @color;
  border-color: @color;
  &:not(.dw-disabled) {
    &:hover {
      background: @hoverColor;
      border-color: @hoverColor;
    }
    &:active {
      background: @activeColor;
      border-color: @activeColor;
    }
  }
}

/* 主要按钮 */
.dw-button.primary {
  // .bg-and-border-color(#409eff, #66b1ff, #3a8ee6);
  .bg-and-border-color(@dw-color-primary, @dw-color-primary-hover, @dw-color-primary-active);
}

/* 成功按钮 */
.dw-button.success {
  .bg-and-border-color(@dw-color-success, @dw-color-success-hover, @dw-color-success-active);
}

/* 信息按钮 */
.dw-button.info {
  .bg-and-border-color(@dw-color-info, @dw-color-info-hover, @dw-color-info-active);
}
/* 警告按钮 */
.dw-button.warning {
  .bg-and-border-color(@dw-color-warning, @dw-color-warning-hover, @dw-color-warning-active);
}

/* 危险按钮 */
.dw-button.danger {
  .bg-and-border-color(@dw-color-danger, @dw-color-danger-hover, @dw-color-danger-active);
}
